import styles from './index.less';

import { Progress } from 'antd';
import * as echarts from 'echarts/core';
import ReactEChartsCore from 'echarts-for-react/lib/core';
import {
  // LineChart,
  BarChart,
  PieChart,
  // ScatterChart,
  RadarChart,
  // MapChart,
  // TreeChart,
  // TreemapChart,
  // GraphChart,
  // GaugeChart,
  // FunnelChart,
  // ParallelChart,
  // SankeyChart,
  // BoxplotChart,
  // CandlestickChart,
  // EffectScatterChart,
  // LinesChart,
  // HeatmapChart,
  // PictorialBarChart,
  // ThemeRiverChart,
  // SunburstChart,
  // CustomChart,
} from 'echarts/charts';
// import components, all suffixed with Component
import {
  // GridSimpleComponent,
  GridComponent,
  // PolarComponent,
  // RadarComponent,
  // GeoComponent,
  // SingleAxisComponent,
  // ParallelComponent,
  // CalendarComponent,
  // GraphicComponent,
  // ToolboxComponent,
  TooltipComponent,
  // AxisPointerComponent,
  // BrushComponent,
  TitleComponent,
  // TimelineComponent,
  // MarkPointComponent,
  // MarkLineComponent,
  // MarkAreaComponent,
  LegendComponent,
  // LegendScrollComponent,
  // LegendPlainComponent,
  // DataZoomComponent,
  // DataZoomInsideComponent,
  // DataZoomSliderComponent,
  // VisualMapComponent,
  // VisualMapContinuousComponent,
  // VisualMapPiecewiseComponent,
  // AriaComponent,
  // TransformComponent,
  DatasetComponent,
} from 'echarts/components';
// Import renderer, note that introducing the CanvasRenderer or SVGRenderer is a required step
import {
  CanvasRenderer,
  // SVGRenderer,
} from 'echarts/renderers';

// Register the required components
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  BarChart,
  PieChart,
  RadarChart,
  CanvasRenderer,
  LegendComponent,
]);

export default () => {
  let option = {
    title: {
      text: 'Basic Radar Chart',
    },
    legend: {
      data: ['训练次数'],
    },
    radar: {
      // shape: 'circle',
      indicator: [
        { name: '训练', max: 6500 },
        { name: 'Administration', max: 16000 },
        { name: 'Information Technology', max: 30000 },
        { name: 'Customer Support', max: 38000 },
        { name: 'Development', max: 52000 },
        { name: '训练', max: 25000 },
      ],
    },
    series: [
      {
        name: '训练次数',
        type: 'radar',
        data: [
          {
            value: [4200, 3000, 20000, 35000, 50000, 18000],
            name: '训练次数',
          },
        ],
      },
    ],
  };

  var progress = [3, 30, 30];

  return (
    <div>
      <div className="box1">
        <dl>
          <dt>近七天各部位运动占比</dt>
          <dd>
            {' '}
            X
            <Progress percent={progress[0]} size="small" />
          </dd>
          <dd>
            胸
            <Progress percent={progress[1]} size="small" />
          </dd>
          <dd>
            背<div class="progress">20%</div>
          </dd>
          <dd>
            臂<div class="progress">20%</div>
          </dd>
          <dd>
            腰<div class="progress">20%</div>
          </dd>
          <dd>
            腹<div class="progress">20%</div>
          </dd>
          <dd>
            臀<div class="progress">20%</div>
          </dd>
          <dd>
            腿<div class="progress">20%</div>
          </dd>
        </dl>
      </div>
      <div>
        <ReactEChartsCore
          echarts={echarts}
          // notMerge={true}
          lazyUpdate={true}
          theme={'theme_name'}
          option={option}
          // onChartReady={}
          // onEvents={EventsDict}
          // opts={ }
        />
      </div>
    </div>
  );
};
